<template>
	<view class="page">
		<template v-if="isLogin">
			<view class="body">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="data-wrap">
						<view class="hd"><text>监测</text></view>
						<view class="con">
							<view class="category-list row-3">
								<view class="item" @click="goList">
									<view class="icon">
										<image src="@/static/images/jl_pc.png" mode="widthFix"></image>
									</view>
									<view class="text">监测数据</view>
								</view>
								<!-- <view class="item" @click="exportData">
									<view class="icon">
										<image src="@/static/images/export.png" mode="widthFix"></image>
									</view>
									<view class="text">导出数据</view>
								</view> -->
								<view class="item" @click="openMap" data-type="jc" data-range="all" data-search='1'>
									<view class="icon">
										<image src="@/static/images/blue_map.png" mode="widthFix"></image>
									</view>
									<view class="text">监测地图</view>
								</view>
							</view>
							<view class="data-list">
								<view class="item" v-for="(item,index) in detail" :key="index">
									<view class="label">{{item.name}}</br>{{item.unit}}</view>
									<text class="val">{{item.value}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue'
	import {
		exportData,router
	} from '@/common/util.js'
	export default {
		name: 'demo',
		data() {
			return {
				isLogin: false,
				params: {},
				detail: {},
				loadingState: {
					default: true
				}
			}
		},
		onShow() {

		},
		async onLoad(params) {
			this.params = JSON.parse(params.params);
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.getdataInfo();
			}
		},
		methods: {

			//监测概览信息
			getdataInfo: async function() { 
				let res = await this.$api.ydc_api.getdataInfo({
					province: this.params.province,
					city: this.params.city,
					district: this.params.district,
					town: this.params.town,
					village: this.params.village,
					beginTime: this.params.beginTime,
					endTime: this.params.endTime
				});
				
				  
				if (res.data.ret == 0) {
					this.loadingState.default = false;
					this.detail = res.data.data;
				}
			},

			// webview 跳转地图页面
			goMap: function(e) { 
				let params = {
					dataRange: 'all',
					pagename: 'map',
					province: this.params.province,
					city: this.params.city,
					district: this.params.district,
					town: this.params.town,
					village: this.params.village,
					beginTime: this.params.beginTime,
					endTime: this.params.endTime
				}
				// goto.navigateTo(param, routes);
				uni.navigateTo({
					url:'/pages/webview/webview?title=调查地图&type=dc&params='+JSON.stringify(params)
				})
			},
			
			openMap:function(e){ 
				let type = e.currentTarget.dataset.type; 
				let range= e.currentTarget.dataset.range; 
				let search=e.currentTarget.dataset.search;  
				router({
					opentype:'navigate',
					url:'/pages/webview/webview',
					params:{
						dataRange: range,
						province: this.params.province,
						city: this.params.city,
						district: this.params.district,
						town: this.params.town,
						village: this.params.village,
						beginTime: this.params.beginTime,
						endTime: this.params.endTime,
						page_type: "map", 
						type: type,  
						search:search
					}
				}) 
			},


			//导出数据
			exportData: function(e) {
				let pagename = 'fkexport';
				let pname = "监测数据";
				let param = {
					pagename: pagename,
					pname: pname,
					page: 1,
					province: this.params.province,
					city: this.params.city,
					district: this.params.district,
					town: this.params.town,
					village: this.params.village,
					beginTime: this.params.beginTime,
					endTime: this.params.endTime
				};
				uni.downloadFile({
				  url: 'https://api.honghuoyi.com/cs.xls',
				  success: function (res) {
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
				// util.doExport({
				// 	url:'/yfk/yfkexport',

				// });
			},
			
			goList:function(){
				let params = {
					dataRange: 'all', 
					province: this.params.province,
					city: this.params.city,
					district: this.params.district,
					town: this.params.town,
					village: this.params.village,
					beginTime: this.params.beginTime,
					endTime: this.params.endTime
				} 
				uni.navigateTo({
					url:'/package_yundiaocha/dataList/dataList?params='+JSON.stringify(params)
				})
			}

		},
		computed: {

		},
		components: {
			loading
		}
	}
</script>

<style lang="less">
	.data-wrap {
		width: 96%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 10rpx;
		overflow: auto;

		.hd {
			padding: 15rpx 20rpx;
			border-bottom: 1rpx solid #ddd;

			text {
				padding-left: 30rpx;
				border-left: 10rpx solid #f00;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.category-list {
		margin: 40rpx 0 10rpx;
	}

	.data-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 94%;
		margin: 0 auto 20rpx;
		border-top: 1rpx dashed #ddd;

		.item {
			width: 22%;
			margin-top: 30rpx;
			font-size: 28rpx;
			text-align: center;

			.label {
				height: 90rpx;
				color: #999;
			}
		}
	}
</style>
